<template>
    <div class="user-profile">
        <h2>用户主页</h2>
        <div class="user-info">
            <h3>基本信息</h3>
            <p><strong>姓名：</strong>{{ user.name }}</p>
            <p><strong>手机号：</strong>{{ user.phone }}</p>
            <p><strong>地址：</strong>{{ user.address }}</p>
            <p><strong>积分：</strong>{{ score }}</p>
            <p><strong>账号状态：</strong>{{ user.status }}</p>
            <button @click="editMode = true" class="edit-button">编辑信息</button>
        </div>

        <div v-if="editMode" class="edit-form">
            <h3>编辑信息</h3>
            <form @submit.prevent="updateUser(user.name, user.address)">
                <input v-model="user.name" type="text" placeholder="姓名" required />
                <input v-model="user.address" type="text" placeholder="地址" required />
                <button type="submit" class="save-button">保存</button>
                <button @click="cancelEdit" class="cancel-button">取消</button>
            </form>
        </div>

        <div class="matches">
            <h3>查看比赛</h3>
            <router-link to="/mainPage" class="matches-link">点击这里查看比赛</router-link>
        </div>

        <div  v-if="isPublic" class="user-match">
            <h3>我的奖品</h3>
            <table>
                    <thead>
                        <tr>
                            <th>奖品</th>
                            <th>数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in userItemVo">
                            <td>{{ item.name }}</td>
                            <td>{{ item.count }}</td>
                        </tr>
                    </tbody>
                </table>
        </div>

        <div v-if="isPublic" class="user-match">
            <h3>用户竞赛情况</h3>
            <table>
                    <thead>
                        <tr>
                            <th>竞猜内容</th>
                            <th>是否成功</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="matchVo in MatchVosByUser" :key="MatchVosByUser.matchId">
                            <td>{{ matchVo.itemName + matchVo.title + matchVo.homeName + 'vs' + matchVo.awayName }}</td>
                            <td>{{ matchVo.win == true ? '成功' : '失败' }}</td>
                        </tr>
                    </tbody>
                </table>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import useUser from '@/hooks/useUser.js';
import useItem from '@/hooks/useItem.js';
import useMatchVo from '@/hooks/useMatchVo.js';

let editMode = ref(false);
const user = ref(JSON.parse(localStorage.getItem("loginUser")));
const { updateUser } = useUser();
const { MatchVosByUser, getWinMatchVoByUser } = useMatchVo();
const { userItemVo, getUserItems } = useItem();

function cancelEdit() {
    editMode.value = false;
    fetchUser();
}

function fetchUser() {
    user.value = JSON.parse(localStorage.getItem("loginUser"));
}

onMounted(() => {
    fetchUser();
    if (isPublic.value) {
        getWinMatchVoByUser(user.value.id);
        getUserItems(user.value.id);
    }
})

const score = computed(() => {
    return localStorage.getItem("public") === "true" ? user.value.score : "暂未公布";
});

const isPublic = computed(() => {
    return localStorage.getItem('public') === 'true';
});

</script>

<style scoped>
.user-profile {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #333;
}

.user-info,
.edit-form,
.matches {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.edit-button,
.save-button,
.cancel-button {
    padding: 10px 15px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.edit-button {
    background-color: #4caf50;
    color: white;
}

.edit-button:hover {
    background-color: #45a049;
}

.save-button {
    background-color: #2196F3;
    color: white;
}

.save-button:hover {
    background-color: #1e88e5;
}

.cancel-button {
    background-color: #f44336;
    color: white;
}

.cancel-button:hover {
    background-color: #e53935;
}

.matches-link {
    color: #2196F3;
    text-decoration: underline;
}

.matches-link:hover {
    text-decoration: none;
}

.user-match {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th,
td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f8f8f8;
}
</style>